<template>
  <a-card title="设备点检管理">
    <a-table :columns="columns" :dataSource="inspectionData" rowKey="deviceId" bordered>
      <template #bodyCell="{ column, text, record }">
        <span v-if="column.dataIndex === 'action'">
          <a-button @click="viewDetails(record)" style="margin-right: 10px">查看详细</a-button>
        </span>
      </template>
    </a-table>

    <div style="margin-top: 20px">
      <a-button type="primary" @click="addInspectionPlan">增加点检计划</a-button>
      <a-button type="danger" @click="deleteInspectionPlan">删除点检计划</a-button>
      <a-button @click="modifyInspectionPlan">修改点检计划</a-button>
      <a-button @click="exportInspectionReport">导出点检报告</a-button>
    </div>

    <a-modal :open="isDetailVisible" title="设备详细信息" @cancel="isDetailVisible = false" :footer="null">
      <p><strong>设备名称:</strong> {{ detailData.deviceName }}</p>
      <p><strong>设备编号:</strong> {{ detailData.deviceId }}</p>
      <p><strong>点检周期:</strong> {{ detailData.inspectionCycle }}</p>
      <p><strong>点检人:</strong> {{ detailData.inspector }}</p>
      <p><strong>本次点检日期:</strong> {{ detailData.lastInspectionDate }}</p>
      <p><strong>计划下达状态:</strong> {{ detailData.planStatus }}</p>
      <p><strong>点检状态:</strong> {{ detailData.inspectionStatus }}</p>
      <p><strong>内容描述:</strong> <a-input v-model="detailDescription" placeholder="请输入内容描述" /></p>
      <a-button type="primary" @click="startInspection(detailData.deviceId)">下达计划</a-button>
    </a-modal>
  </a-card>
</template>

<script setup>
  import { ref } from 'vue';

  // 点检数据
  const inspectionData = ref([
    {
      deviceName: '设备A',
      deviceId: '001',
      inspectionCycle: '每月',
      inspector: '张三',
      lastInspectionDate: '2024-09-01',
      planStatus: '已下达',
      inspectionStatus: '完成',
    },
    {
      deviceName: '设备B',
      deviceId: '002',
      inspectionCycle: '每季度',
      inspector: '李四',
      lastInspectionDate: '2024-09-05',
      planStatus: '未下达',
      inspectionStatus: '未完成',
    },
    {
      deviceName: '设备C',
      deviceId: '003',
      inspectionCycle: '每月',
      inspector: '王五',
      lastInspectionDate: '2024-09-10',
      planStatus: '已下达',
      inspectionStatus: '完成',
    },
    {
      deviceName: '设备D',
      deviceId: '004',
      inspectionCycle: '每半年',
      inspector: '赵六',
      lastInspectionDate: '2024-09-15',
      planStatus: '已下达',
      inspectionStatus: '进行中',
    },
    {
      deviceName: '设备E',
      deviceId: '005',
      inspectionCycle: '每月',
      inspector: '陈七',
      lastInspectionDate: '2024-09-20',
      planStatus: '未下达',
      inspectionStatus: '未完成',
    },
    {
      deviceName: '设备F',
      deviceId: '006',
      inspectionCycle: '每年',
      inspector: '孙八',
      lastInspectionDate: '2024-09-25',
      planStatus: '已下达',
      inspectionStatus: '完成',
    },
  ]);

  // 列配置
  const columns = [
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName' },
    { title: '设备编号', dataIndex: 'deviceId', key: 'deviceId' },
    { title: '点检周期', dataIndex: 'inspectionCycle', key: 'inspectionCycle' },
    { title: '点检人', dataIndex: 'inspector', key: 'inspector' },
    { title: '本次点检日期', dataIndex: 'lastInspectionDate', key: 'lastInspectionDate' },
    { title: '计划下达状态', dataIndex: 'planStatus', key: 'planStatus' },
    { title: '点检状态', dataIndex: 'inspectionStatus', key: 'inspectionStatus' },
    { title: '操作', dataIndex: 'action', key: 'action' }, // 操作列
  ];

  // 状态管理
  const isDetailVisible = ref(false);
  const detailData = ref({});
  const detailDescription = ref('');

  // 下达计划
  const startInspection = (deviceId) => {
    console.log(`下达计划给设备: ${deviceId}`);
  };

  // 查看详细信息
  const viewDetails = (record) => {
    detailData.value = record; // 设置详细信息
    detailDescription.value = ''; // 清空内容描述
    isDetailVisible.value = true; // 显示弹窗
  };

  // 增加点检计划
  const addInspectionPlan = () => {
    console.log('增加点检计划');
  };

  // 删除点检计划
  const deleteInspectionPlan = () => {
    console.log('删除点检计划');
  };

  // 修改点检计划
  const modifyInspectionPlan = () => {
    console.log('修改点检计划');
  };

  // 导出点检报告
  const exportInspectionReport = () => {
    console.log('导出点检报告');
  };
</script>

<style scoped>
  button {
    margin-right: 10px; /* 按钮间隔设置为10px */
  }
</style>
